import {
    AppstoreOutlined,
    ContainerOutlined,
    DesktopOutlined,
    MailOutlined,
    PieChartOutlined, 
    CheckOutlined,
    ProfileOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom'

import 'antd/dist/antd.css'
import './Nav.css'

function getItem(label, key, icon, children,) {
    return {
        label,
        key,
        icon,
        children,
    };
}

const items = [
    getItem('客户管理', '1', <PieChartOutlined />, [
        getItem(<NavLink to='/customerManagement'>客户详情</NavLink>, '1-1')
    ]),
    getItem('水表管理', '2', <DesktopOutlined />, [
        getItem(<NavLink to='/waterMeterManagement'>仪表详情</NavLink>, '2-1'),
        getItem('仪表类型', '2-2')
    ]),
    getItem('收费管理', '3', <ContainerOutlined />, [
        getItem(<NavLink to='/chargeRecord'>抄表记录</NavLink>, '3-1'),
        getItem(<NavLink to='/chargeBill'>生成账单</NavLink>, '3-2', '', [
            getItem(<NavLink to='/chargeFee'>查看详情</NavLink>, '3-2-1', <ContainerOutlined />)
        ]),
    ]),
    getItem('计费管理','4',<CheckOutlined />,[
        getItem(<NavLink to='/basePrice'>基价设置</NavLink>,'4-1'),
        // getItem(<NavLink to='/rules'>计费规则</NavLink>,'4-2')
    ]), 
    getItem(<NavLink to="/area">区域管理</NavLink>,'5', <MailOutlined />),
    getItem(<NavLink to='/paymentManagement'>缴费管理</NavLink>, '6', <AppstoreOutlined />,),
    getItem('统计分析', '7', <AppstoreOutlined />),
    getItem('公告管理', '8', <ProfileOutlined />, [
        getItem(<NavLink to='/noticeManagement'>公告详情</NavLink>)
    ]),
];

const Nav = () => {
    return (
        <div className='menu'>
            <Menu
                defaultOpenKeys={['1']}
                defaultSelectedKeys={['1-1']}
                mode="inline"
                theme="dark"
                items={items}
            />
        </div>
    );
};
export default Nav;